<template>
  <div class="order">
    <div>
      <h2>未处理订单</h2>
      <el-table :data="orders" border>
        <el-table-column label="客户姓名" prop="object.name" />
        <el-table-column label="客户电话" prop="object.phone" />
        <el-table-column label="订单编号" prop="ordercode" />
        <el-table-column label="订单详情" prop="details">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="click"
            >
              <el-table :data="scope.row.details">
                <el-table-column property="product.name" label="产品名" />
                <el-table-column property="product.brand" label="品牌" />
                <el-table-column property="product.model.info" label="产品类型" />
                <el-table-column property="quantity" label="数量" />
              </el-table>
              <el-button slot="reference">详情</el-button>
            </el-popover>

          </template>
        </el-table-column>
        <el-table-column label="销售负责人" prop="account.username" />
        <el-table-column label="订单状态" prop="status" />
        <el-table-column label="销售总价" prop="price" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="comfirm(scope.row)">出库确认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block1">
      <el-pagination
        :page-size="limit"
        :total="total"
        style="padding:30px 0;text-align:center;"
        layout="total,prev,pager,next,jumper"
        @current-change="getPagedata"
      />
    </div>
    <div>
      <h2>已处理订单</h2>
      <el-table :data="orders2" border>
        <el-table-column label="客户姓名" prop="object.name" />
        <el-table-column label="客户电话" prop="object.phone" />
        <el-table-column label="订单编号" prop="ordercode" />
        <el-table-column label="订单详情" prop="details">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="click"
            >
              <el-table :data="scope.row.details">
                <el-table-column property="product.name" label="产品名" />
                <el-table-column property="product.brand" label="品牌" />
                <el-table-column property="product.model.info" label="产品类型" />
                <el-table-column property="quantity" label="数量" />
              </el-table>
              <el-button slot="reference">详情</el-button>
            </el-popover>

          </template>
        </el-table-column>
        <el-table-column label="销售负责人" prop="account.username" />
        <el-table-column label="订单状态" prop="status" />
        <el-table-column label="销售总价" prop="price" />
        <el-table-column label="创建时间" prop="createTime" />
      </el-table>
    </div>
    <div class="block2">
      <el-pagination
        :page-size="limit2"
        :total="total2"
        style="padding:30px 0;text-align:center;"
        layout="total,prev,pager,next,jumper"
        @current-change="getPagedata2"
      />
    </div>
    <div>
      <h2>出库表单</h2>
      <el-button type="primary" @click="outVisible = true">添加</el-button>
      <el-table :data="outbounds" border>
        <el-table-column label="订单编号" prop="orderSell.ordercode" />
        <el-table-column label="产品名称" prop="product.name" />
        <el-table-column label="品牌" prop="product.brand" />
        <el-table-column label="出库仓库" prop="warehouse.name" />
        <el-table-column label="本次出库数量" prop="quantity" />
        <el-table-column label="销售单价" prop="suggestedPrice" />
        <el-table-column label="总价" prop="price" />
        <el-table-column label="出库时间" prop="createTime" />
        <el-table-column label="出库确认" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" v-if="scope.row.isinandout===0" @click="update(scope.row)">确认</el-button>
            <el-button size="small" type="primary" v-else disabled>已确认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block3">
      <el-pagination
        :page-size="limit3"
        :total="total3"
        style="padding:30px 0;text-align:center;"
        layout="total,prev,pager,next,jumper"
        @current-change="getPagedata3"
      />
    </div>
    <el-dialog
      title="出库"
      :visible.sync="outVisible"
      width="60%"
      :before-close="handleOutClose"
    >
      <el-form>
        <el-form-item>
          <el-select v-model="outInfos.orderId" placeholder="请选择订单" @change="selectProduct">
            <el-option
              v-for="order in orders"
              :key="order.id"
              :label="order.ordercode"
              :value="order.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="outInfos.warehouseId" placeholder="请选择仓库" @change="selectProduct">
            <el-option
              v-for="warehouse in warehouses"
              :key="warehouse.id"
              :label="warehouse.name"
              :value="warehouse.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="productInfos" border :selectable="true" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="产品名称" prop="product.name" />
        <el-table-column label="产品品牌" prop="product.brand" />
        <el-table-column label="产品型号" prop="product.model.info" />
        <el-table-column label="仓库余量" prop="quantity" />
        <el-table-column label="销售单价" prop="sellingPrice" />
        <el-table-column label="出库数量" prop="number">
          <template #default="{row}">
            <el-input v-model="row.number" type="number" clearable />
          </template>
        </el-table-column>
        <el-table-column label="总价" prop="price" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outVisible = false">取 消</el-button>
        <el-button type="primary" @click="addoutInfo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import outApi from '@/api/outbound/out.js'
import customerApi from '@/api/customer/customer.js'
export default {
  name: 'Order',
  data() {
    return {
      formData: {},
      outVisible: false,
      outInfos: {
        warehouseId: '',
        orderId: '',
        products: []
      },
      warehouses: [],
      productInfos: [],
      formData2: {},
      formData3: {},
      current: 1, // 当前页
      limit: 10, // 每页显示记录数
      total: 0, // 总记录数
      current2: 1,
      limit2: 10,
      total2: 0,
      current3: 1,
      limit3: 10,
      total3: 0,
      updateVisible: false,
      orders: [],
      orders2: [],
      outbounds: [],
      updateorderInfo: {
        ordercode: '',
        name: '',
        status: ''
      },
      names: null
    }
  },
  created() {
    this.getOrders()
    this.getOrders2()
    this.getNames()
    this.getOutbounds()
    this.getAllWarehouses()
  },
  methods: {
    handleSelectionChange(selection) {
      // selection 是一个数组，包含当前选中的所有行
      this.outInfos.products = selection
      console.log(this.outInfos)
    },
    selectProduct() {
      outApi.selectStockProduct({ 'warehouseId': this.outInfos.warehouseId }).then(res => {
        this.productInfos = res.data.list
        console.log(res.data.list)
      })
    },
    getAllWarehouses() {
      outApi.selectAllWarehouse({}).then(res => {
        this.warehouses = res.data.list
      })
    },
    handleOutClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$message('取消操作')
          done()
        })
        .catch(_ => {})
    },
    getOrders() {
      this.formData.page = this.current
      this.formData.limit = this.limit
      this.formData.type = 1
      outApi.showsellw(this.formData).then(res => {
        this.orders.length = 0
        this.orders = res.data.list.map(order => {
          if (order.status === 1) {
            order.status = '待处理'
          } else if (order.status === 0) {
            order.status = '已处理'
          }
          return order
        })
        this.total = res.data.total
      })
    },
    comfirm(row) {
      // eslint-disable-next-line no-unused-vars
      const updateOrderInfo = {
        orderId: '',
        type: ''
      }
      updateOrderInfo.orderId = row.id
      updateOrderInfo.type = row.type
      this.$confirm('确定已出库完所有产品?请确认出库表单，如有遗漏后果自负', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定执行then方法
        // 调用接口修改订单状态
        outApi.updateOrderStatus(updateOrderInfo).then(res => {
          if (res.code === 500) {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '出库已完成！'
            })
            // 刷新页面
            this.getOrders()
            this.getOrders2()
            this.getNames()
          }
        })
        console.log(row)
      })
    },
    // 分页获取
    getPagedata(page = 1) {
      this.current = page
      this.formData.page = this.current
      this.formData.limit = this.limit
      outApi.showsellw(this.formData).then(
        res => {
          this.orders = res.data.list
          this.total = res.data.total
        }
      )
    },
    getNames() {
      customerApi.showName().then(res => {
        this.names = res.data
      })
    },
    getOrders2() {
      this.formData2.page = this.current2
      this.formData2.limit = this.limit2
      outApi.showselly(this.formData2).then(res => {
        this.orders2.length = 0
        this.orders2 = res.data.list.map(order => {
          if (order.status === 1) {
            order.status = '待处理'
          } else if (order.status === 0) {
            order.status = '已处理'
          }
          return order
        })
        this.total2 = res.data.total
      })
    },
    getPagedata2(page = 1) {
      this.current2 = page
      this.formData2.page = this.current2
      this.formData2.limit = this.limit2
      outApi.showselly(this.formData2).then(
        res => {
          this.orders2 = res.data.list
          this.total2 = res.data.total
        }
      )
    },
    addoutInfo() {
      this.outVisible = false
      outApi.outbound(this.outInfos).then(res => {
        console.log(res.data)
        this.getOutbounds()
      })
    },
    getOutbounds() {
      this.formData3.page = this.current3
      this.formData3.limit = this.limit3
      outApi.selectout(this.formData3).then(
        res => {
          this.outbounds = res.data.list
          this.total3 = res.data.total
        })
    },
    update(row) {
      const stockupdateInfo = {
        orderId: '',
        warehouseId: '',
        quantity: '',
        productId: ''
      }
      stockupdateInfo.orderId = row.orderSell.id
      stockupdateInfo.warehouseId = row.warehouse.id
      stockupdateInfo.quantity = row.quantity
      stockupdateInfo.productId = row.product.id
      outApi.updateStock(stockupdateInfo).then(res => {
        if (res.code === 500) {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '出库成功'
          })
          // 刷新页面
          this.getOutbounds()
        }
      })
    },
    getPagedata3(page = 1) {
      this.current3 = page
      this.formData3.page = this.current3
      this.formData3.limit = this.limit3
      outApi.showselly(this.formData3).then(
        res => {
          this.outbounds = res.data.list
          this.total3 = res.data.total
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
</style>
